<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>涛哥-网易云音乐播放器</title>
    <style>
        /*全局样式*/
        * {padding:0px;margin:0px;}
        html,body {width: 100%;height: 100%;}

        /*字体图标*/
        @font-face {
            font-family: 'iconfont';
            src: url('font/iconfont.eot');
            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
                url('font/iconfont.woff2') format('woff2'),
                url('font/iconfont.woff') format('woff'),
                url('font/iconfont.ttf') format('truetype'),
                url('font/iconfont.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /*播放器背景图片*/
        #back_box {width:100%;height:100%;background: url(data/1.jpg) no-repeat center center;filter:blur(15px);}

        /*音乐播放器容器盒子*/
        #music_box {
            position: absolute;top: 0;left: 0;
            width: 100%;height: 100%;
            display: flex; /*采用flex弹性布局*/
            flex-direction:column; /*主轴的方向*/
            justify-content: space-between; /*主轴上的对齐方式*/
            background: rgba(0,0,0,0.5);
        }

        .header_row {width:100%;height:6%;display:flex;align-items:center;justify-content:space-between;}
        .cd_row {width:100%; height:55%;border-top:1px solid #999;position: relative;overflow:hidden;}
        .lyric_row {width:100%; height:20%;background-color:#fc0;}
        .time_row {width:100%; height:6%;background-color:#fc0;}
        .btn_row {width:100%; height:12%;background-color:#fc0;}

        /*播放器头部标题内样式*/
        #music_title{font-size:20px;font-weight:400;color: #fff;}
        .header_row span.iconfont{font-size:30px;color: #fff;margin-left:10px;margin-right:10px;}

        /*cd唱片效果图*/
        #cd_img{margin:10% auto; width:80%;height:auto;text-align:center;background:url(data/1.jpg) no-repeat center center;background-size:65% auto;}
        #cd_img img{display:block;width:100%;height:auto;margin:0 auto;border-radius:50%;}
        /*cd播放棍*/
		#needle{width: 20%;height:auto;position:absolute;top:0px;left:46%;z-index:9999;transform-origin: 0% 0%;transition:transform 1s linear;transform:rotate(-30deg)}
		#needle.run{transform:rotate(0deg)}
        /*cd唱片转动效果*/
		.rainbow{animation: 20s rainbow infinite linear;}
		@keyframes rainbow { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
    </style>
</head>
<body>

    <!-- 播放器背景图片 -->
    <div id="back_box"></div>

    <!-- 音乐播放器容器盒子 -->
    <div id="music_box">
        <!--播放器头部标题-->
        <div class="header_row">
            <span class="iconfont">&#xe6e2;</span>
            <span id="music_title">你笑起来真好看</span>
            <span class="iconfont">&#xe69d;</span>
        </div>

        <!--模拟cd播放机-->
        <div class="cd_row">
            <div id="cd_img" class="">
                <img src="images/disc-ip6.png"/>
            </div>
            <img id="needle" class="run" src="./images/needle-ip6.png"/>
        </div>

        <!--歌词区域-->
        <div class="lyric_row" id="music_lyric">
        </div>

        <!--显示播放时间、进度条-->
        <div class="time_row">
        </div>

        <!--按钮（暂停/播放、上一曲、下一曲、声音开关、音量调节、循环播放）-->
        <div class="btn_row">
        </div>
    </div>
</body>
</script>
</html>